<template>
  <view class="immersive-background" v-if="show">
    <image class="background-image" :src="backgroundImage" :style="{ opacity: activeImageIndex === 1 ? 1 : 0 }" mode="aspectFill"></image>
    <image class="background-image" :src="backgroundImage2" :style="{ opacity: activeImageIndex === 2 ? 1 : 0 }" mode="aspectFill"></image>
    <view class="background-overlay"></view>
  </view>
</template>

<script>
import { getPic } from '@/utils/img.js'

export default {
  name: 'picshow',
  
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  
  data() {
    return {
      backgroundImage: '',
      backgroundImage2: '', // 第二张背景图片，用于预加载
      activeImageIndex: 1, // 当前激活的图片索引，1或2
      // 背景图片轮播相关
      backgroundImages: [], // 存储所有背景图片
      currentImageIndex: 0, // 当前显示的图片索引
      nextImageIndex: 0, // 下一张图片的索引
      backgroundTimer: null, // 背景切换定时器
      _currentLoadId: null, // 用于检查组件是否已销毁
    }
  },
  
  watch: {
    show: {
      handler(newVal) {
        if (newVal) {
          this.loadBackgroundImages();
        } else {
          this.clearBackgroundTimer();
        }
      },
      immediate: true
    }
  },
  
  beforeDestroy() {
    // 清理背景切换定时器
    this.clearBackgroundTimer();
    
    // 确保加载提示被隐藏
    try {
    } catch (e) {
      console.error('[背景组件] 隐藏加载提示异常:', e);
    }
    
    // 清理图片资源引用
    this.backgroundImage = '';
    this.backgroundImage2 = '';
    this.backgroundImages = [];
    
    // 清除加载ID
    this._currentLoadId = null;
  },
  
  // 添加页面卸载处理
  onUnload() {
    // 清理背景切换定时器
    this.clearBackgroundTimer();
    
    // 确保加载提示被隐藏
    try {
    } catch (e) {
      console.error('[背景组件] 隐藏加载提示异常:', e);
    }
    
    // 清除加载ID
    this._currentLoadId = null;
  },
  
  methods: {
    // 加载背景图片
    async loadBackgroundImages() {
      // 添加一个标记，用于检查组件是否已销毁
      const loadId = Date.now();
      this._currentLoadId = loadId;
      
      try {
        // 只在沉浸模式下显示加载提示
        if (this.show) {
       
        }
        
        // 获取背景图片
        const result = await getPic();
        
        // 如果组件已销毁或加载ID不匹配（说明有新的加载请求），则不继续处理
        if (!this._currentLoadId || this._currentLoadId !== loadId) {
          console.log('[背景组件] 加载已取消，组件可能已销毁或有新的加载请求');
          if (this.show) {
          }
          return;
        }
        
        console.log('[背景组件] 获取背景图片结果:', result);
        
        // 清空现有图片数组
        this.backgroundImages = [];
        
        if (result && result.results && result.results.length > 0) {
          // 新版API返回格式
          this.backgroundImages = result.results.map(item => item.imageUrl);
          console.log('[背景组件] 获取到背景图片数量:', this.backgroundImages.length);
        } else if (result && result.length > 0) {
          // 兼容旧版API返回格式
          this.backgroundImages = result.map(item => item.url || item.imageUrl);
          console.log('[背景组件] 获取到背景图片数量(旧格式):', this.backgroundImages.length);
        } else {
          console.error('[背景组件] 获取背景图片失败');
          if (this.show) {
          }
          return;
        }
        
        // 设置初始图片
        this.currentImageIndex = 0;
        this.nextImageIndex = this.backgroundImages.length > 1 ? 1 : 0;
        
        // 设置第一张图片为当前背景
        if (this.backgroundImages.length > 0) {
          this.backgroundImage = this.backgroundImages[this.currentImageIndex];
          console.log('[背景组件] 设置初始背景图片:', this.backgroundImage);
          
          // 预加载下一张图片
          if (this.backgroundImages.length > 1) {
            this.backgroundImage2 = this.backgroundImages[this.nextImageIndex];
            console.log('[背景组件] 预加载下一张背景图片:', this.backgroundImage2);
          } else {
            this.backgroundImage2 = this.backgroundImage;
          }
          
          // 设置初始激活图片
          this.activeImageIndex = 1;
        }
        
        // 启动背景图片轮播
        this.startBackgroundRotation();
        
        // 只在沉浸模式下隐藏加载提示
        if (this.show) {
        }
      } catch (error) {
        console.error('[背景组件] 获取背景图片异常:', error);
        if (this.show) {
        }
      }
    },
    
    // 启动背景图片轮播
    startBackgroundRotation() {
      // 先清理可能存在的定时器
      this.clearBackgroundTimer();
      
      // 如果没有图片或只有一张图片，不启动轮播
      if (!this.backgroundImages || this.backgroundImages.length <= 1) {
        console.log('[背景组件] 图片数量不足，不启动轮播');
        return;
      }
      
      console.log('[背景组件] 启动背景图片轮播，间隔5秒');
      
      // 设置定时器，每5秒切换一次背景图片
      this.backgroundTimer = setInterval(() => {
        // 切换激活的图片索引（在1和2之间切换）
        this.activeImageIndex = this.activeImageIndex === 1 ? 2 : 1;
        
        // 更新当前图片索引
        this.currentImageIndex = this.nextImageIndex;
        
        // 计算下一张图片的索引
        this.nextImageIndex = (this.currentImageIndex + 1) % this.backgroundImages.length;
        
        // 预加载下一张图片到非激活的图片元素
        if (this.activeImageIndex === 1) {
          // 当前显示的是backgroundImage，预加载到backgroundImage2
          this.backgroundImage2 = this.backgroundImages[this.nextImageIndex];
          console.log('[背景组件] 预加载下一张图片到backgroundImage2:', this.nextImageIndex);
        } else {
          // 当前显示的是backgroundImage2，预加载到backgroundImage
          this.backgroundImage = this.backgroundImages[this.nextImageIndex];
          console.log('[背景组件] 预加载下一张图片到backgroundImage:', this.nextImageIndex);
        }
        
        console.log('[背景组件] 切换背景图片，当前索引:', this.currentImageIndex, '下一张索引:', this.nextImageIndex);
        
        // 如果已经轮播到最后一张图片，准备重新获取新的图片
        if (this.nextImageIndex === 0) {
          console.log('[背景组件] 即将轮播完所有图片，准备获取新图片');
          // 设置一个延迟，确保当前图片显示完整的5秒
          setTimeout(() => {
            // 确保还在沉浸模式下才重新加载
            if (this.show) {
              console.log('[背景组件] 开始获取新的背景图片集');
              this.loadBackgroundImages();
            }
          }, 2500); // 在当前图片显示2.5秒后开始加载新图片，留足够时间加载
        }
      }, 5000); // 5秒切换一次
    },
    
    // 清理背景切换定时器
    clearBackgroundTimer() {
      if (this.backgroundTimer) {
        console.log('[背景组件] 清理背景切换定时器');
        clearInterval(this.backgroundTimer);
        this.backgroundTimer = null;
      }
    }
  }
}
</script>

<style scoped>
/* 沉浸模式背景 */
.immersive-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* 改为1，使背景图片可见 */
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.1s ease; /* 添加过渡效果 */
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* 降低不透明度，使背景更清晰 */
  /* 移除毛玻璃效果 */
  /* backdrop-filter: blur(5px); */
  /* -webkit-backdrop-filter: blur(5px); */
}
</style> 